<template>
    <div class="container2">
      <Nav></Nav>
      <div class="swiper-container">
        <div class="swiper-wrapper">
          <div class="swiper-slide" v-for="(item,index) in swiperimg" :key="index">
            <img :src="item" alt="">
          </div>
        </div>
        <!-- Add Pagination -->
        <div class="swiper-pagination"></div>
      </div>
      <!--推荐机构-->
      <div class="s_box">
        <p>推荐机构</p>
        <ul class="ji_ul">
          <li @click="menav(item)" v-for="(item,index) in orgData" :key="index">
            <div class="top">
              <img :src="item.avatar" alt="数据加载失败">
              <!--<span>888人已加入学习</span>-->
            </div>
            <div class="bottom">
              <p>{{item.user_login}}</p>
              <p>{{item.signature}}</p>
            </div>
          </li>
        </ul>
        <p>
          <span>机构</span>
          <span @click="jiM()">查看更多 <img src="../../../assets/img/youjian.png" alt=""></span>
        </p>
      </div>

      <!--推荐达人-->
      <div class="s_box">
        <p>推荐达人</p>
        <ul class="da_ul">
          <li v-for="(item,index) in expData" :key="index">
            <img @click="menav(item)" :src="item.avatar" alt="数据加载失败">
            <div @click="menav(item)" class="e_center">
              <p>{{item.user_login}}</p>
              <p>{{item.signature}}</p>
              <p>领域：{{item.territory}}</p>

            </div>
            <span @click="follow(item)">{{item.status==0?'+ 关注':'已关注'}}</span>
          </li>
        </ul>
        <p>
          <span>达人</span>
          <span @click="moreP()">查看更多 <img src="../../../assets/img/youjian.png" alt=""></span>
        </p>
      </div>

      <transition name="van-slide-right">
        <div v-show="visible" class="tran_right">{{Fade}}</div>
      </transition>

      <Footer></Footer>
    </div>
</template>

<script>
  import Swiper from 'swiper'
  import Nav from '../../com/Nav'
  import Footer from '../../com/Footer'
  //import * as home from "../../../api/home.js"
  import * as search from "../../../api/search.js"
    export default {
      name: "Boshi",
      components:{
        Nav,
        Footer
      },
      data(){
        return {
          Fade:'',
          visible:false,
          swiperimg:[],
          orgData:[],
          expData:[]
        }
      },
      beforeMount(){
        let parmes = {type:2};
        search.bannerList(parmes).then(res=>{
          this.swiperimg = res.data;
          this.$nextTick(() => {  // 下一个UI帧再初始化swiper
            var swiper = new Swiper('.swiper-container', {
              autoplay:true,
              loop : true,
              pagination: {
                el: '.swiper-pagination',
              },
            });
          })
        });

        //推荐机构
        let parms2 = {user_type:2,page:1,per_page:4,user_id:this.$store.state.user_id};
        search.recommendUser(parms2).then(res=>{
          this.orgData = res.data;
        });
        //推荐达人
        let parms3 = {user_type:1,page:1,per_page:4,user_id:this.$store.state.user_id};
        search.recommendUser(parms3).then(res=>{
          this.expData = res.data;
        });
      },
      methods:{
        menav(item){
          this.$router.push({
            path: '/menav',
            query:{
              id:item.id
            }
          })
        },
        jiM(){
          this.$router.push("/moreorgan")
        },
        moreP(){
          this.$router.push("/moreperson")
        },
        follow(item){
          if (item.status==0){
            item.status = 1;
            let flow = {follow_id:item.id,user_id:this.$store.state.user_id,status:1};
            search.follow(flow).then(res=>{
              console.log(res);
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            });
            search.followed(flow).then(res=>{
              console.log(res);
            })
          } else{
            item.status = 0;
            let flow = {follow_id:item.id,user_id:this.$store.state.user_id,status:0};
            search.follow(flow).then(res=>{
              console.log(res);
              this.visible = true;
              this.Fade = res.msg;
              setTimeout(() => {
                this.visible = false;
              }, 500);
            });
            search.followed(flow).then(res=>{
              console.log(res);
            })
          }
        },
      }
    }
</script>

<style scoped>

</style>
